<!-- Display a loading until the iframe page is loaded. -->
<core-loading [hideUntil]="!loading && (!!safeUrl || !!launchExternalLabel)" />

<!--The iframe needs to be outside of core-loading, otherwise the request is canceled while loading. -->
<!-- Don't add the iframe until safeUrl is set, adding an iframe with null as src causes the iframe to load the whole app. -->
@if (safeUrl && !launchExternalLabel) {
    <div [style.min-width]="'min('+iframeWidth+', 100%)'" [style.min-height]="'min('+iframeHeight+', 100%)'"
        class="core-iframe-container">
        @if (initialized && showFullscreenOnToolbar && !loading) {
            <core-navbar-buttons slot="end" prepend>
                <ion-button fill="clear" (click)="toggleFullscreen()"
                    [ariaLabel]="(fullscreen ? 'core.disablefullscreen' : 'core.fullscreen') | translate">
                    <ion-icon [name]="fullscreen ? 'fas-compress' : 'fas-expand'" slot="icon-only" aria-hidden="true" />
                </ion-button>
            </core-navbar-buttons>
        }

        <!-- allowfullscreen cannot be set dynamically using attribute binding, define 2 iframe elements. -->
        @if (allowFullscreen) {
            <iframe #iframe class="core-iframe" [attr.id]="id" [style.width]="iframeWidth" [style.height]="iframeHeight" [src]="safeUrl"
                allowfullscreen="true" [class.core-iframe-loading]="loading">
            </iframe>
        } @else {
            <iframe #iframe class="core-iframe" [attr.id]="id" [style.width]="iframeWidth" [style.height]="iframeHeight" [src]="safeUrl"
                [class.core-iframe-loading]="loading">
            </iframe>
        }

        @if (!loading && displayHelp) {
            <ion-button expand="block" fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog"
                class="core-button-as-link core-iframe-help">
                {{ 'core.iframehelp' | translate }}
            </ion-button>
        }
    </div>
}

<!-- Iframe content needs to be launched in an external app. -->
@if (launchExternalLabel) {
    <ion-button expand="block" class="ion-text-wrap ion-margin" (click)="launchExternal()">
        {{ launchExternalLabel }}
    </ion-button>
}
